<template>
  <div class="jczq_result_list">
    <van-list v-model="isLoading" :finished="finished" 
    :finished-text="finishedText" @load="loadMore">
      <div v-for="(data,mainIndex) in listItem" :key="mainIndex">
        <div class="list_view">
          <div class="list_top">
            <div class="left">
              {{data.changci}}
              <span class="span_name">{{data.match_name}}</span>
            </div>
            <div class="middle">{{data.match_time}}</div>
            <div class="right">完场</div>
          </div>
          <div class="list_middle">
            <div class="left">
              <span>客</span>
              {{data.guest}}
            </div>
            <div class="middle">
              <span class="num s_num">{{data.prize_result.guest_score}}</span>
              <span class="num">:</span>
              <span class="num s_num">{{data.prize_result.host_score}}</span>
            </div>
            <div class="right">
              {{data.host}}
              <span>主</span>
            </div>
          </div>
          <div class="list_buttom">
            <div class="div_c">
              <div class="div_text">胜负</div>
              <div class="div_val">{{data.prize_result.play_type_datas.odds_1}}</div>
            </div>
            <div class="div_c">
              <div class="div_text">让分({{data.rq}})</div>
              <div class="div_val">{{data.prize_result.play_type_datas.odds_2}}</div>
            </div>
            <div class="div_c">
              <div class="div_text">大小({{data.sd}})</div>
              <div class="div_val">{{data.prize_result.play_type_datas.odds_4}}</div>
            </div>
            <div class="div_c">
              <div class="div_text">胜分差</div>
              <div class="div_val">{{data.prize_result.play_type_datas.odds_3}}</div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { List } from "vant";
export default {
  name: "basketball_result_list",
  components: {
    List
  },
  data() {
    return {
      isLoading: false,
      finishedText: "没有更多了",
      defaultParameter: {
        page: 1,
        page_size: 5
      },
      listItem: [],
      finished: true
    };
  },
  props: {
    queryDate: { type: String, default: null }
  },
  watch: {
    queryDate(val) {
     
      this.getItemList({prize_date:val});
    }
  },
  methods: {
    getItemList(opts) {
      // debugger;
      let dateStr = this.queryDate;
      opts.prize_date =
        dateStr.substring(0, 4) +
        "-" +
        dateStr.substring(6, 4) +
        "-" +
        dateStr.substring(8, 6);
      if(opts.page == undefined){
        opts.page = this.defaultParameter.page;
      }  
      opts.page_size = this.defaultParameter.page_size;
      this.$api.getPrizeJclqList(opts).then(
        res => {
          if (res.http_code === 200) {
            this.page = res.data.page;
            if (res.data.page === 1) {
              // 这里以后直接将 res.data 传递给子组件 子组件完成分页逻辑处理
              this.pageNum = res.data.page;
              this.listItem = res.data.datas;

            } else {
              this.listItem.push(...res.data.datas);
            }
            // 处理加载更多逻辑
            if (res.data.page * res.data.page_size >= res.data.total_count) {
             
              this.finished = true;
            } else {
              this.finished = false;
            }
            this.isLoading = false;
          }
          
        },
        error => {
          this.isLoading = false;
        }
      );
    },
    loadMore() {
      console.log("触发loading 事件");
      let _this = this;
      let pars = {};
      pars.prize_date = this.queryDate;
      pars.page = this.page + 1;
      this.getItemList(pars);
    }
  },
  activated() {
    console.log("出发");
    let pars = {};
    pars.prize_date = this.queryDate;
    
    pars.page = this.page;
    this.getItemList(pars);
  }
};
</script>
<style  lang="less">
.jczq_result_list {
  .list_view {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;

    .list_top {
      display: flex;
      color: #dcdcdc;
      height: 14px;
      line-height: 14px;
      .left {
        flex: 1;
        font-size: 12px;
        .span_name {
          color: gray;
        }
      }
      .middle,
      .right {
        flex: 1;
        font-size: 12px;
        text-align: center;
      }
      .right {
        text-align: right;
      }
    }
    .list_middle {
      margin-top: 13px;
      display: flex;
      height: 36px;
      .left {
        display: inline-block;
        flex: 1;
        line-height: 36px;
        font-size: 16px;
        text-align: right;
        color: #333;
        font-weight: 500;
        span {
          font-size: 12px;
          color: gray;
        }
      }
      .middle {
        flex: 1;
        min-width: 160px;
        height: 36px;
        text-align: center;
        color: #dcdcdc;
        .s_num {
          width: 50px;
          background-color: #eaeaea;
          color: #5bb2ff;
          line-height: 38px;
        }
        .num {
          display: inline-block;
          height: 100%;
          border-radius: 5px;
          font-size: 18px;
        }
      }
      .right {
        flex: 1;
        display: inherit;
        align-items: center;
        font-size: 16px;
        span {
          color: gray;
          font-size: 12px;
          padding-left: 8px;
        }
      }
    }
    .list_buttom {
      display: flex;
      margin-top: 16px;
      border-top: 1px solid #eaeaea;
      border-left: 1px solid #eaeaea;
      border-bottom: 1px solid #eaeaea;
      border-radius: 5px;
      overflow: hidden;
      .div_c {
        flex: 1;
        text-align: center;
        border-right: 1px solid #eaeaea;
        .div_text {
          border-left: 0;
          height: 27px;
          line-height: 27px;

          font-size: 12px;
          color: #333;
        }
        .div_val {
          height: 32px;
          line-height: 32px;
          border-left: 0;
          border-top: 1px solid #eaeaea;
          font-size: 12px;
          color: #ff4536;
        }
      }
    }
  }
}
</style>